NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-24 06:02:36 +03:00
Code Issues Packages Projects Releases Wiki Activity
4,399 Commits 59 Branches 399 Tags 20 MiB
f46fba439a
Commit Graph

1440 Commits

Author SHA1 Message Date
Brooke Angel
4d0c029800 add sizes to borderlessButton 2019-02-15 10:01:57 -08:00
Brooke Angel
1f7717c341 add borderless button to styleguide 2019-02-15 10:01:57 -08:00
Brian Hicks
c8d5f331a8 🤖 2019-02-11 15:38:37 -06:00
Brian Hicks
7fcfa1ef01 add multiline checkbox demo to styleguide 2019-02-11 15:31:55 -06:00
Danielle Pham
d49b22e207 Add onBlur to TextInput V4 2019-01-07 15:35:47 -05:00
Juan Edi
97a1ef1411
Merge branch 'master' into labradoodle/highlighting-colors 2019-01-04 10:28:09 -03:00
Ally McKnight
23aec1f14a shows onBlur behaviour in the styleguide 2019-01-03 14:47:46 -08:00
Ally McKnight
dc6319ecc4 adds onblur attribute to new text area version 2019-01-03 14:37:44 -08:00
Juan Edi
f2edeab452 Add new colors to styleguide app 2019-01-03 18:01:17 -03:00
Jasper Woudenberg
5899d7a386
Merge branch 'master' into zamboni/add-button-v7 2019-01-03 13:44:35 +00:00
Brooke Angel
0fb768cfde Merge remote-tracking branch 'origin/master' into zamboni/add-button-v7 2018-12-26 14:12:06 -08:00
Brooke Angel
7502199e7c add WidthFillContainer 2018-12-20 10:53:09 -08:00
Ally McKnight
324c5df775 update style guide with correct version 2018-12-19 16:04:10 -08:00
Ally McKnight
961f2a0c74 Merge remote-tracking branch 'origin' into ink/ally/text-area-update 2018-12-17 11:13:48 -08:00
mavnn
b3a73ceb73
Merge remote-tracking branch 'origin/master' into update-checkbox-text 2018-12-17 11:03:27 +00:00
mavnn
ae7aa6047c
Add Checkbox.V4/PremiumCheckbox.V3 with correct text styling 
Previous versions relied on the nri2015 sass stylesheet for label style.
 2018-12-14 12:18:49 +00:00
Brooke Angel
a4db9de1a6 dont use weird pseudoassets for textarea 2018-12-13 14:52:02 -08:00
Ally McKnight
f28c1c6664 styleguide uses v4 2018-12-13 14:44:39 -08:00
Brooke Angel
f2e9925b2e demonstrate clipboard setup in styleguide-app 2018-12-13 12:59:35 -08:00
Brooke Angel
e4469b3ba7 initial add button V7 2018-12-13 10:50:11 -08:00
Brooke Angel
eb027cea59 change how we source javascript files 2018-12-13 10:43:06 -08:00
Brooke Angel
b1efd55649 fix svgs 
Because there was no child element for the generated svgs, they were
throwing lots of console errors
 2018-12-13 10:37:51 -08:00
Brooke Angel
21da9ac0db use package for Debug.Control module 2018-12-12 16:36:36 -08:00
Brooke Angel
1d24b5caea fix local running instructions in readme 2018-12-11 21:57:06 +01:00
Brooke Angel
5daa51d894 fix how to run styleguide-app locally in makefile 2018-12-11 21:57:06 +01:00
Brooke Angel
e7cbc74793 fix navigation bug 2018-12-11 21:57:06 +01:00
Brooke Angel
63e47f4cc8 get navigation messages in order 2018-12-11 21:57:06 +01:00
Brooke Angel
fa5f4ddbcd push urls for internal requests as well as external 2018-12-11 21:57:06 +01:00
Gavin Panella
223d481c98 Parse routes with elm/parser. 2018-12-11 21:57:06 +01:00
Brooke Angel
7bbd4c1739 start converting styleguide-app to elm 0.19 2018-12-11 21:57:06 +01:00
Luke Westby
26608637e5
Add Table.V4 with builtin keyframes (#168) 
* add table v4 with builtin keyframes

* get things looking good in the styleguide

* remove log
 2018-11-13 10:19:01 -08:00
Richard Feldman
e2907d9ba2 Prep for 0.19 dual-publish (#163) 
* Use elm-css 16.0.0

* 💀 Ui.Checkbox V1 and V2

* s/Css.Foreign/Css.Global/g

* 💀 Nri.Ui.Styles.V1

* 💀 BannerAlert.V1

* 💀 Modal.V1

* 💀 Dropdown.V1

* 💀 Select.V1 and V2

* 💀 Alert.V1

* 💀 Button.V1 and V2

* 💀 Divider.V1

* 💀 Icon.V1 and V2

* 💀 Outline.V1

* 💀 SegmentedControl.V1-V5

* 💀 TextArea.V1 and V2

* 💀 TextInput.V1

* delete the rest of the modules

* actually more deletions

* InputStyles v1 is unused

* move to src-0.18

* do the 0.19 upgrade

* select options are addressable by index

* elm-css 16

* update scripts

* elm-format

* Update V2.elm

* put the nbsp back

* elm-format validation for both versions
 2018-11-12 15:38:19 -08:00
Luke Westby
10e29b412b
Puffins final upgrades (#166) 
* add toString to select config

* let table use v2 keyframes

* add to elm-package

* use button for tabs

* delete noop hrefs

* add to select tests

* use html v3
 2018-11-12 12:25:37 -08:00
Tereza Sokol
9bb5081c37 Add Tabs.V2 (with Html.Styled) (#165) 
* Tabs.V2

* Expose module

* Fix filename
 2018-11-09 14:01:11 -08:00
Luke Westby
aac0c1febc
Direct class compatibility (#146) 
* drop support for attributes and move class compatibility into factory

* fix docs

* bring back attributes for now

* forgot attribute change in class, don't load shim

* delete native-shim file

* make it more minification-friendly

* fix docs

* no need for method names
 2018-10-30 16:26:27 -07:00
Danielle Pham
2fb69ff347 Merge branch 'master' into ink__guided-draft-icon 
Move guided draft icon to Icon V4
 2018-10-29 12:51:12 -04:00
Danielle Pham
0278958762 Icon V4: use SvgIcon for assignment types 2018-10-26 12:49:26 -04:00
Danielle Pham
cbe41a6dd0 Remove white from guidedDraft name 2018-10-26 12:06:25 -04:00
Tessa Kelly
fe8a66d772 Use an SVG sprite for the guided draft icon instead of an image 2018-10-24 09:55:35 -07:00
Tessa Kelly
0ff72c1ba6 Use generated svgs rather than a separate svg file 2018-10-24 09:55:35 -07:00
Tessa Kelly
08b67825c0 Adds the guided draft icon 2018-10-24 09:52:42 -07:00
mavnn
e50c15e49f
Add Self Review assignment type icon 
Add self review icon to style guide

Revert "index.html" changes

This reverts commit 7ea91a89fb74f9ce6d6b9e0889b8d5b1c29f6b1a.
 2018-10-24 09:38:58 +01:00
Luke Westby
c1ff19f0d0
Add Html.Styled versions for everything (#139) 
* make html.styled versions of remaining widgets

* upgrade all the examples

* change license name
 2018-10-23 09:55:30 -07:00
Danielle Pham
cabc2fd59e Rearrange icon examples 2018-10-15 17:22:58 -04:00
Danielle Pham
81ca29d946 Add assignmentTypeQuickWrite icon 2018-10-15 17:21:08 -04:00
Danielle Pham
87691d1a6b Add assignmentTypePeerReview icon 2018-10-15 17:15:57 -04:00
brookeangel
07068031a6 standardize vertical alignment on style guide 2018-10-05 08:14:20 +02:00
brookeangel
61ca62cb47 update button on styleguide 2018-10-05 08:14:20 +02:00
Ian Davies
ef549c21d5 Update styleguide to remove ButtonHeight 2018-10-03 10:01:54 +01:00
Gavin Panella
aefe8692ca Rename HeightFixed to HeightDefault. 2018-10-02 14:38:23 +02:00
Gavin Panella
b28453a279 Change ButtonWidth from an alias to a custom type. 
`WidthUnbounded` elicits behaviour the same as `Nothing` was previously, and
`WidthExact Int` is the same as `Just Int`.
 2018-10-02 14:38:23 +02:00
Gavin Panella
48832d36b8 Switch from sizing to height. 
This allows for the `HeightFixed` which is the same behaviour as V3,
`HeightBounded Int` which allows for a certain number of lines of text but no
more, and `HeightUnbounded` which will allow the button to grow in height
without bound.
 2018-10-02 14:34:11 +02:00
Gavin Panella
1fafb6cd2a Add sizing capability to V4 button, and put it in the style guide. 2018-10-02 14:34:11 +02:00
Gavin Panella
61d9557ab1 Start new V4 button. 2018-10-02 14:34:11 +02:00
Michael Glass
70d214957c
run elm-format 2018-09-26 16:02:28 +02:00
Juan Edi
9c06eff3f0 Fix elm-docs 2018-09-10 12:19:55 -03:00
Juan Edi
b600af7bbe Styleguide allows to toggle width settings for SegmentedControl 2018-09-10 12:19:15 -03:00
Juan Edi
265b83c393 Options for SegmentedControl's width: FitContent | FillContainer 
Until V4 the control would always fit its contents. On V5 that behaviour was
changed to always fill the container. This means that to limit the element's
width one had to limit the value of its container (which might be hard to do
when the labels of the tabs are unknown or might change).

We now support both settings, and the user has to decide what to do for each use
case.
 2018-09-10 11:56:26 -03:00
Juan Edi
7c3c2966be Nri.Ui.SegmentedControl.V6 now uses Html.Styled 2018-09-10 11:32:08 -03:00
Juan Edi
6bee811648 Create SegmentedControl.V6 (copy of V5 for the moment) 2018-09-10 11:07:11 -03:00
James Gary
743f270fec Merge branch 'master' into ink-james--premium-checkbox 2018-09-07 15:32:58 -07:00
James Gary
105bbfa3c7 Update example to use V2 checkbox 2018-09-07 15:24:17 -07:00
Brooke
d3d54439d4 creates modal V3 2018-09-07 09:23:16 -07:00
James Gary
29775bd9b8 Merge branch 'master' into ink-james--premium-checkbox 2018-09-06 13:02:59 -07:00
Brooke
09555104a3 fix no close button conundrum 2018-09-06 08:13:16 -10:00
James Gary
509141f3cb Match the asset name that's already in the monolith 2018-09-05 15:38:44 -07:00
James Gary
833556e688 Add premium writing flag asset, make test more specific 2018-09-05 14:34:55 -07:00
James Gary
ee9271bdff Update PremiumCheckbox to explicitly manage pennant 
- Simplify example
 2018-09-05 13:40:18 -07:00
James Gary
b5393a25e8 Simplify PremiumConfig 2018-08-31 13:11:32 -07:00
James Gary
b2a2532ff0 Don't require PremiumLevel; allow general premium levels 2018-08-30 12:47:48 -07:00
Brooke
24368e17d4 use same styles from monolith (more recent) 2018-08-29 12:38:24 -07:00
Brooke
56ee341a7e add modal module example 2018-08-29 12:09:22 -07:00
Brooke
8d1760a889 Fix Nri.Ui.Button.V3.linkExternalWithTracking to allow Cmd-/Ctrl- clicks on the links 2018-08-28 17:18:17 -07:00
Brooke
8a9c01c472
make link text-align center 2018-08-21 16:33:28 -07:00
Brooke
6c0a70ff94
get delete button in order 2018-08-21 16:33:27 -07:00
Brooke
e23f8f8e82
compiles but it isnt pretty 2018-08-21 16:33:27 -07:00
Tessa Kelly
4b5489a332 Adds assets 2018-08-16 18:10:00 -07:00
Tessa Kelly
ab40b55b45 COnvert to Html.Styled 2018-08-16 18:10:00 -07:00
Tessa Kelly
686db4cb37 Add alerts to the styleguide 2018-08-16 18:10:00 -07:00
James Gary
78c62bbfb9 Add pen icon 2018-08-13 14:41:09 -07:00
Stoeffel
9273e1f5c4 adds examples for DisclosureIndicator to the style-guide 2018-07-27 08:26:48 +02:00
James Gary
582d62fccf
Merge branch 'master' into ink-james--update-flag-icon-png 2018-07-26 15:37:45 -07:00
Brooke
87c620568e textarea uses defaultValue again 2018-07-24 14:15:21 -07:00
James Gary
dd935d3c2c Update flag icon to bigger more vibrant red 2018-07-23 16:46:47 -07:00
Brooke
b1a9452dac update Select filename in styleguide 2018-07-10 17:56:20 -07:00
Brooke
356da2aaf8 dont import Select V2 styles for styleguide app 2018-07-10 17:55:10 -07:00
Brooke
a29b95e0ed add Select V3 2018-07-10 17:50:39 -07:00
Tessa Kelly
7dae282ae0 LockOnInside -> Locked 2018-06-26 09:36:43 -07:00
Tessa Kelly
dd88c76330 Revert "Run build script" 
This reverts commit f37ae362a9.
 2018-06-25 10:54:31 -07:00
Tessa Kelly
e97c64cae8 Punt on the SVG icon thing -- these icons didn't go through the build_icons script nicely 2018-06-25 10:54:24 -07:00
Tessa Kelly
f37ae362a9 Run build script 2018-06-22 17:29:30 -07:00
Tessa Kelly
3a80a27ee4 Add student assignment actions sectoin 2018-06-22 17:29:18 -07:00
Tessa Kelly
a0758ba6a9 Add secondary button 2018-06-22 11:01:54 -07:00
Tessa Kelly
74c5bacfa6 Add start button svg 2018-06-22 11:01:25 -07:00
Tessa Kelly
afe0e046eb Expose and use the new Icon module 2018-06-22 11:00:34 -07:00
Tessa Kelly
5cb8d4ceff Use Text module for nicer headings 
:
 2018-06-22 11:00:34 -07:00
Tessa Kelly
0cc0b37509 Update the Icons in the styleguide 2018-06-22 11:00:34 -07:00
Tessa Kelly
264a093a6f Merge remote-tracking branch 'origin/master' into ink__update-checkbox 2018-06-22 09:22:02 -07:00
Jasper Woudenberg
56685a3019 Use new heading modules over standard h\d elements 
The inclusion of reset.css file nuked the default browser styles for
headers. This change sees us using custom styled headers instead to
bring structure back to the styleguide pages.
 2018-06-22 10:41:38 +01:00
Jasper Woudenberg
51e79158a8 Add modules for headings in the styleguide 
The CSS reset removed default browser styles for h1, h2, h3, etc elements,
resulting in a pretty weird looking styleguide. This adds modules for headings,
one version for use with plain Html, the other for use with Html.Styled.
 2018-06-22 10:37:43 +01:00
Jasper Woudenberg
21c59355d8 Include css-reset in the styleguide app 
A CSS reset is used to ensure designs look the same regardless of the
browser they are displayed in. Including one for the styleguide app will
ensure that we do not rely on any browser base styles for our designs.
 2018-06-22 10:30:26 +01:00
Tessa Kelly
0a03d4d0e1 elm-format 0.7.0-exp 2018-06-20 13:15:33 -07:00
Tessa Kelly
534fade431 Kill the color theme 2018-06-20 10:52:02 -07:00
Tessa Kelly
40391a3e43 Add the premium flag (and put it in line with its checkbox) 2018-06-20 10:37:02 -07:00
Jasper Woudenberg
44d78aa962 Remove checkbox example that no longer makes sense 2018-06-20 16:13:08 +01:00
Jasper Woudenberg
257f9d0c06 Add styleguide assets for checkboxes 2018-06-20 16:10:30 +01:00
Jasper Woudenberg
8fb23ec8e4 Add styleguide section for checkboxes 2018-06-20 16:06:11 +01:00
Tessa Kelly
93b499916a Add random checkmark image just to have a checkmark 2018-06-19 17:27:30 -07:00
Tessa Kelly
1d740bf0e5 Fix compilation of the text area 2018-06-19 16:43:17 -07:00
Tessa Kelly
994b058bb6 Add new version of the checkbox 2018-06-14 18:15:04 -07:00
Luke Westby
38ca396ac8
Updates to TextArea (#70) 
* update textarea js code and make it npm-ready

* use an attribute instead so dom debugging is easier

* use data- attribute to be I D I O M A T I C

* version the custom element

* include marica's resize logic improvements

* changes to elm module

* clean up styleguide build and use v3 in styleguide
 2018-06-11 11:08:49 -07:00
Brooke
107b369a66
Merge branch 'master' into add-textarea-v3-and-textinput-v3 2018-05-31 15:10:19 -07:00
Marica Odagaki
fdaf3fe55a Add custom-elements native-shim for TextArea.js 
see: https://github.com/webcomponents/custom-elements#es5-vs-es2015
source: https://www.jsdelivr.com/package/npm/@webcomponents/custom-elements?version=1.1.1
 2018-05-31 13:56:15 -08:00
Brooke
fe0466d3f4 use new elm-css for TextInput V3 2018-05-31 14:43:24 -07:00
Jasper Woudenberg
a56dc32d10 Merge branch 'master' into textarea-v2-minimum-height 2018-05-29 14:52:01 -07:00
Jasper Woudenberg
b7a6d9bf5a Refer to right widget version in documentation 2018-05-29 10:52:39 -07:00
Jasper Woudenberg
aac8229c0a 💀 Remove unused import 2018-05-29 10:52:39 -07:00
Brooke
745eda419e styleguide shows writing textinput without label and in error 2018-05-29 10:52:39 -07:00
Brooke
22d856ceca add Nri.Ui.TextInput.V2 with writing style (styling not perfect yet) 2018-05-29 10:52:39 -07:00
Brooke
35e1473ad4 add text input to styleguide app 2018-05-29 10:52:39 -07:00
Marica Odagaki
87792bedff Combine autoResize and minimumHeight into height 
Writing the changelog drove home the fact that minimumHeight
only makes sense when the textarea is set to auto-resize.
 2018-05-23 17:41:49 -08:00
Marica Odagaki
e0596c1159 Fix the bug where scrollHeight gets padded if we use auto 2018-05-23 17:41:49 -08:00
Marica Odagaki
03ffe17413 Look at computed min-height before falling back to computed height 
Now that min-height is specified through an auto-generated class,
it's not available through the element's style attribute.
 2018-05-23 17:41:49 -08:00
Marica Odagaki
80695f1cbe Autoresize textarea upon initialization 2018-05-23 17:41:49 -08:00
Marica Odagaki
942865b140 Make it easier to specifiy the minimumHeight while reducing freedom 
If we want to allow specifying arbitrary height as the minimum height
in the future, it could be added as `Custom someUnit` in the future.
 2018-05-23 17:41:49 -08:00
Jasper Woudenberg
fee5596960 Fix TextArea example 2018-05-18 11:23:32 +02:00
Jasper Woudenberg
2a77a03efc Migrate TextArea.V2 to Html.Styled 
This does not actually migrate the styles themselves yet, it just
changes the Html type of the `TextArea` exposed from the module.
 2018-05-18 10:35:31 +02:00
Jasper Woudenberg
716efba4dd Use TextArea.V2 in styleguide app 2018-05-18 10:17:51 +02:00
Jasper Woudenberg
93f101abaf
Merge branch 'master' into ink--upgrade-text 2018-05-17 08:38:47 +02:00
Tessa Kelly
3253e3466d Add V2 of Nri.Ui.Text using Html.Styled 2018-05-16 17:09:17 -07:00
James Gary
e89d96e2a9 Add mastery badge icon svg 2018-05-16 16:27:17 -07:00
James Gary
e443ddb7a9 Merge branch 'master' of github.com:NoRedInk/noredink-ui into ink-james--add-mastery-badge-icon 2018-05-15 12:11:51 -07:00
Michael Glass
6132797f8c
move styleguide images to lfs 2018-05-12 13:50:01 +02:00
James Gary
37c4d95bc3 Add mastery badge icon 2018-05-11 13:39:15 -07:00
Jasper Woudenberg
75cfeb731b
Merge branch 'master' into add-icons-to-styleguide 2018-05-04 13:51:11 +02:00
Jasper Woudenberg
eec2962006 Only store images in git lfs 2018-05-04 13:44:30 +02:00
Jasper Woudenberg
fa34fd7bd4 Pull in new changes from the monolith 
Also add a `noPermission` page.
 2018-05-03 14:32:26 +02:00
Jasper Woudenberg
d6a10d1ed4 Merge branch 'master' into extract-nri-page 2018-05-03 14:19:22 +02:00
Jasper Woudenberg
44c58c2bc0 Merge branch 'master' into table-v2 2018-05-03 09:39:18 +02:00
Jasper Woudenberg
03c460f80e Add icons to styleguide application 2018-05-02 10:46:44 +02:00
Jasper Woudenberg
f8bd18a8a0 Add Nri.Ui.Page.V1 to styleguide 2018-05-01 17:34:16 +02:00
Jasper Woudenberg
14fd3c142e 🎨 elm-format 2018-04-30 13:24:03 +02:00
Jasper Woudenberg
dcf42a0f37 Nri.Table example uses latest Button module 2018-04-30 13:16:36 +02:00
Jasper Woudenberg
1edf7da0ab Add buttons to the styleguide 2018-04-30 13:14:20 +02:00
Jasper Woudenberg
72a4a1c5e6 elm-format 2018-04-25 19:29:22 +02:00
Jasper Woudenberg
8f344774c3 Switch Table.V2 over to Html.Styled 
This is probably better then relying on more deprecated elm css
functionality, like we were before.
 2018-04-25 19:25:34 +02:00
Jasper Woudenberg
de10ffb43e New table version that takes any css width 
This way you're not limited to creating tables with fixed-width columns.
This also makes the table take up the maximum available width space by
default.
 2018-04-25 19:10:34 +02:00
Jasper Woudenberg
4c8f2cae89 Add keyframe animations to styleguide example 
Also provide a function for easily embedding said keyframes into a page.
 2018-04-24 18:36:37 +02:00
Jasper Woudenberg
e950661c8b Add Table to the styleguide application 2018-04-24 17:49:29 +02:00
Hardy Jones
1647b2f358
Make selects expand to the full width of parent 
There are places where we need the select to be as wide as possible.
Since it seems like a sensible default to have all the selects expand,
we take that approach.

If we find out that this is harder, we can release use the old version.
 2018-04-18 07:58:19 -07:00
Hardy Jones
5036c63e28
Merge branch 'master' into extract-select 2018-04-17 07:56:22 -07:00
Hardy Jones
4977d00361
Style the selector 
We need some styling that was implicit in the monolith.
 2018-04-16 15:50:28 -07:00
Hardy Jones
bffaae0e3f
Extract Nri.Select from the monolith 2018-04-16 15:43:01 -07:00
Hardy Jones
199689abd0
Style the dropdown 2018-04-16 13:12:17 -07:00
Hardy Jones
1b86ec442f
Extract Nri.Dropdown to noredink-ui 
There are a couple of minor differences here.
Some of the dependencies we had were inlined.
_Should_ be no behavioral changes though.
 2018-04-16 12:19:43 -07:00
James Gary
a4d3448b47 Add skip icon 2018-04-04 09:34:42 -07:00
Tessa Kelly
eb3d9f038c Adds sumitting, rating, and revising helpers 2018-04-02 17:17:42 -07:00
Tessa Kelly
1d28d9c617 :bowtie: move assignment type icons to the assignment type section 2018-04-02 17:10:32 -07:00
Hardy Jones
e5a56486d7
Allow segmented control to expand to parent's width 
We want to allow the control to take up the full width of the parent.
This will most likely break something if you try to upgrade directly.
Should be fixable by putting the control in an element with
the appropriate width.
 2018-03-30 09:10:33 -07:00
Hardy Jones
d4d6991643
Style the segmented control tabs directly 
tl;dr; Use a class for each variant instead of overriding one variant.

Before, we relied on CSS specificity in an unclear way.
The `Focused` class was applying properly because it was ordered later
than the `Tab` class in the stylesheet.
The ordering that is important is the ordering in `styles` value.
Since `elm-css` generates the stylesheet in the order of the lists,
the `Focused` rule would be generated after the `Tab` rule.
Meaning the `Focused` rule would take precedence over the `Tab` rule
if an element had both classes as it was defined later in the stylesheet.

There are some concerns with this approach:
1. It's not readily apparent that the ordering in `styles` is important.
    It is pretty easy to change the ordering of the list
    and have it break the styling.
2. We rely on `elm-css` to generate the stylesheet in a specific order.
    If it changes the order of rules it generates,
    we're almost surely going to break the styling.
3. Altering styles for tabs that are not focused is even less intuitive.
    Since the specificity is the same,
    you might not know why a given rule applies (or doesn't apply).

Rather, we can eschew the specificity/precedence issues
by applying a different class to each tab.
The stuff that is the same can stay on the `Tab` class,
and the stuff that differs can be on different classes.

We are now able to set the background color for `Unfocused` tabs.
We were relying on the control being placed atop a white background.
When we moved to using the control atop a non-whitebackground,
it showed that the `Unfocused` tabs had a transparent backround.
All of our designs show `Unfocused` tabs with a white backround.

See https://github.com/NoRedInk/noredink-ui/pull/14 for more information.
 2018-03-30 09:10:33 -07:00
Hardy Jones
55ce63dbfc
Fix filename 
The style guide is currently for V4.
 2018-03-30 09:10:33 -07:00
Jasper Woudenberg
6e041d9364 Styleguide uses latest Icon / SegmentedControl 2018-03-29 12:58:41 +02:00
Hardy Jones
fb2dbbfb47
Extract updated segmented control from the monolith 
This version is like `Nri.Ui.SegmentedControl.V1` with the icon changes.
It has the fix for `box-sizing`.

All the other caveats from `Nri.Ui.SegmentedControl.V1`
(if there were any) apply here as well.
 2018-03-28 18:20:58 -07:00
Hardy Jones
0a75e8229b
Extract Nri.Icon from the monolith 
The recommendation is to break the styles API rather than the view API
when moving something out of the monolith into this repo.

`Nri.Icon` is not really setup for that sort of breakage.
If we would prefer to have the styles break rather than the view,
that will take more work.
Work that can be done independent of the extraction.

The transition in the monolith ought to look something like:

```elm
module Nri.Icon exposing (..)

import Html exposing (Html)
import Nri.SvgSprite
import Nri.Ui.Icon.V1 exposing (Assets, IconType)

icon : { alt : String, icon : IconType } -> Html msg
icon config =
  Nri.Ui.Icon.V1.icon assets

assets : Assets {}
assets =
  { activity = Nri.SvgSprite.activity
  , arrowDown = Nri.SvgSprite.arrowDown
  , attention_svg = Nri.Assets.attention_svg
  ...
  }
```

So hopefully, the change is still very small on the monolith side.

There's maybe a bigger concern than which API breaks.
`Nri.Icon` has some behavior for a11y.
We could definitely change the internals over during the extraction.
But, since all of these changes are value-level changes,
it's very likely that we'll break something in the process.
That's a bigger concern because instead of affecting
the handful of Engineers working at NRI,
we would be affecting the millions of people using the site.

We shouldn't fear making those kinds of changes.
However, we should make them when we can give them the appropriate
attention they deserve.
Not when one person is trying to move as fast as possible to avoid
race conditions of moving modules between repos.
 2018-03-28 18:20:16 -07:00
Hardy Jones
349e9760a3
Use V2 of the segmented control in the style guide 2018-03-26 19:56:20 -07:00
Hardy Jones
3b99ba56a7
Add SegmentedControl 2018-03-23 19:05:34 -07:00
Tessa Kelly
e869f064ff Adds new version of the checkbox 2018-03-19 15:55:04 -07:00
Tessa Kelly
98a8a5458c Remove dependency on nri-elm-css 2018-03-16 17:33:24 -07:00
Tessa Kelly
63d7178b32 🐛 fix duplicated package install (not sure how this every worked 😬:) 2018-03-16 17:33:24 -07:00
Tessa Kelly
e7b5d0e878 Nri.Colors -> Nri.Ui.Colors.V1 2018-03-16 17:33:24 -07:00
Tessa Kelly
ef390c606c Nri.Fonts -> Nri.Ui.Fonts.V1 2018-03-16 17:15:03 -07:00
Tessa Kelly
4ca27fc05c 🎨 clean up example code styles 2018-03-16 16:24:29 -07:00
Tessa Kelly
f9c3884e6a Adds Colors 2018-03-16 16:24:29 -07:00
Tessa Kelly
186a19e7f4 Adds user generated font style 2018-03-16 16:24:09 -07:00
Tessa Kelly
c406c5353d Adds Fonts as a category 2018-03-16 16:24:09 -07:00
Tessa Kelly
7f7826bcae Display the Fonts 2018-03-16 16:24:09 -07:00
Jasper Woudenberg
cf2dec09fd Add text area for content creation 
The styling used for this textarea is not quite the same as the one of
the default or writing textareas currently in use.
 2018-03-13 10:08:07 +01:00
Jasper Woudenberg
f19903e3d3
Merge pull request #5 from NoRedInk/update-textarea 
Update textarea
 2018-03-12 20:04:18 +01:00
Tessa Kelly
12ed44549e Adds missing smallHeading example 2018-03-07 14:38:32 -08:00
Tessa Kelly
e3edcafc15 Adds the ugMediumBody and ugSmallBody to the examples 2018-03-07 14:37:21 -08:00
Jasper Woudenberg
12dd71a68d Merge branch 'master' into update-textarea 2018-03-02 09:45:27 -08:00
Stoeffel
b9c913ec19 rename to Writing and use Html.Styled 2018-03-01 13:37:58 -08:00
Jasper Woudenberg
2f92a1ec4a Add TextArea to styleguide 2018-02-28 16:22:48 -08:00
Stoeffel
168bf35682 upgrade styleguide-app to latest version of elm-css 2018-02-28 14:18:52 -08:00
Stoeffel
c8d9d6cc09 update style guide 2018-02-28 14:04:22 -08:00
Jasper Woudenberg
8ea6b7360a Include text styles in example 2018-02-21 15:49:12 +01:00
Jasper Woudenberg
892b238aaa Add instructions on starting the styleguide app 2018-02-20 15:19:42 +01:00
Jasper Woudenberg
2748dcdf8f Add Muli font 2018-02-20 15:19:32 +01:00
Jasper Woudenberg
9614fe8e91 Remove and .gitignore elm.js 
This is a compilation artifact.
 2018-02-20 15:09:29 +01:00
Brooke
0c33c83d73 add mini styleguide for ui components 2018-02-12 13:32:38 -08:00