-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: enhance themes usage and the docs
- Loading branch information
1 parent
526b5cd
commit 1e07ec2
Showing
23 changed files
with
450 additions
and
200 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
145 changes: 145 additions & 0 deletions
145
packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| /** | ||
| * UI lib Component Example | ||
| * | ||
| */ | ||
|
|
||
| import React, { PureComponent, Fragment } from 'react' | ||
| import styled from '@emotion/styled' | ||
| import Button from 'dnb-ui-lib/src/components/button' | ||
| import { bell_medium as Bell, question } from 'dnb-ui-lib/src/icons' | ||
|
|
||
| class Example extends PureComponent { | ||
| clickHandler = () => { | ||
| alert('You clicked a button with a click function attached to it') | ||
| } | ||
| render() { | ||
| return ( | ||
| <Fragment> | ||
| <div className="example-box"> | ||
| <Button | ||
| text="Primary button with text only" | ||
| title="This is a button title" | ||
| on_click={this.clickHandler} | ||
| attributes={{ | ||
| 'data-fake:on_click': 'clickme()' | ||
| }} | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| text="Secondary button with text only" | ||
| variant="secondary" | ||
| title="This is a button title" | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| text="Disabled primary button" | ||
| title="This is a button title" | ||
| disabled | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| text="Disabled secondary button" | ||
| variant="secondary" | ||
| title="This is a button title" | ||
| disabled | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| text="Primary button with icon" | ||
| title="This is a button title" | ||
| icon="chevron_right" | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| text="Primary button with icon on left" | ||
| title="This is a button title" | ||
| icon_position="left" | ||
| icon="chevron_left" | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| variant="tertiary" | ||
| text="Tertiary button with icon on left" | ||
| title="This is a button title" | ||
| icon_position="left" | ||
| icon="chevron_left" | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| variant="tertiary" | ||
| text="Tertiary button with icon on left" | ||
| title="This is a button title" | ||
| icon_position="left" | ||
| icon="chevron_left" | ||
| disabled | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| text="Primary button with href" | ||
| href="?no-cache=1" | ||
| title="This is a link" | ||
| icon_position="right" | ||
| icon="chevron_right" | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| title="Disabled Icon only Button" | ||
| icon="calendar" | ||
| disabled | ||
| /> | ||
| <Button title="Button with Icon only" icon="calendar" /> | ||
| <Button | ||
| title="Default sized Button with medium Icon" | ||
| icon="calendar" | ||
| icon_size="medium" | ||
| size="default" | ||
| /> | ||
| <Button | ||
| title="Button with custom, Secondary Icon only" | ||
| icon={question} | ||
| /> | ||
| <p className="example-caption">Button with Icon only</p> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| variant="signal" | ||
| text="Signal Button (large size)" | ||
| size="large" | ||
| icon={Bell} | ||
| icon_size="medium" // medium is equalent to 24, but responsive | ||
| /> | ||
| </div> | ||
| <div className="example-box"> | ||
| <Button | ||
| variant="signal" | ||
| text="Disabled Signal Button" | ||
| icon={<Bell />} | ||
| icon_size="medium" | ||
| disabled | ||
| /> | ||
| </div> | ||
| </Fragment> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: block; | ||
| width: 100%; | ||
| ` | ||
|
|
||
| // export { Example } | ||
| export default () => ( | ||
| <Wrapper> | ||
| <Example /> | ||
| </Wrapper> | ||
| ) |
9 changes: 9 additions & 0 deletions
9
packages/dnb-design-system-portal/src/pages/uilib/components/button/demos.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| draft: true | ||
| --- | ||
|
|
||
| import Examples from 'Pages/uilib/components/button/Examples' | ||
|
|
||
| # Demos | ||
|
|
||
| <Examples /> |
7 changes: 7 additions & 0 deletions
7
packages/dnb-design-system-portal/src/pages/uilib/components/button/description.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| draft: true | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick. Exceptions are made at times when it is used as a navigation element in the `action-nav` element. |
22 changes: 22 additions & 0 deletions
22
packages/dnb-design-system-portal/src/pages/uilib/components/button/details.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| --- | ||
| draft: true | ||
| --- | ||
|
|
||
| | Properties | Description | | ||
| | --------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `type` | _(optional)_ `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) . | | ||
| | `text` | _(optional)_ the content of the button. | | ||
| | `title` | _(optional)_ title of the button. Optional, but should always be included because of accessibility. | | ||
| | `variant` | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. | | ||
| | `size` | _(optional)_ the size of the button. For now there is **medium**, **default** and **large**. | | ||
| | `icon` | _(optional)_ name of icon to be included in the button. | | ||
| | `icon_position` | _(optional)_ position of icon inside the button. Set to `left` or `right`. Defaults to `right` if not set. | | ||
| | `icon_size` | _(optional)_ define icon width and height. Defaults to 16px | | ||
| | `disabled` | _(optional)_ to disable/enable the button without using the `attribute` property. | | ||
| | `class` | _(optional)_ any extra modifying class. | | ||
| | `attributes` | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes. | | ||
| | `href` | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. | | ||
|
|
||
| | Events | Description | | ||
| | ---------- | --------------------------------------------- | | ||
| | `on_click` | _(optional)_ will be called on a click event. | |
Empty file.
86 changes: 83 additions & 3 deletions
86
...esign-system-portal/src/pages/uilib/usage/customisation/component-properties.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,97 @@ | ||
| --- | ||
| title: 'Component Properties' | ||
| draft: false | ||
| order: 3 | ||
| order: 6 | ||
| --- | ||
|
|
||
| import 'dnb-ui-lib/src/web-components' | ||
| import ComponentBox from 'Tags/ComponentBox' | ||
| import PropertiesExample from 'Pages/uilib/usage/customisation/examples/properties-example' | ||
|
|
||
| # Component Properties | ||
|
|
||
| ## What if a property has to change at runtime? | ||
| Every [Component](/uilib/components) has its own `properties` to make them work for a variety of cases. You may have a look at the Table describing all the possibilities. Check out f.eks. the [Button Properties](/uilib/components/button#info). | ||
|
|
||
| But here You have some examples. You can even modify them right away in the Browser. | ||
|
|
||
| ## Large Buttons & Icons | ||
|
|
||
| <ComponentBox> | ||
| {` | ||
| <> | ||
| <Button | ||
| variant="secondary" | ||
| text="Secondary Button" | ||
| icon="chevron_right_medium" | ||
| size="large" | ||
| /> | ||
| <Button | ||
| icon="chevron_right" | ||
| icon_size="medium" | ||
| size="large" | ||
| /> | ||
| </> | ||
| `} | ||
| </ComponentBox> | ||
|
|
||
| ## Extended example | ||
|
|
||
| <ComponentBox scope={{hamburgerIcon}} noInline={true}> | ||
| {` | ||
| const Wrapper = styled.div\` | ||
| .dnb-button { | ||
| --button-width: 4rem; | ||
| --button-height: 4rem; | ||
| --button-border-radius: 2rem; | ||
| svg { | ||
| color: fuchsia; | ||
| } | ||
| } | ||
| \` | ||
| const myHandler = () => alert('Hello') | ||
| render( | ||
| <Wrapper> | ||
| <Button | ||
| variant="secondary" | ||
| icon={hamburgerIcon} | ||
| size="default" | ||
| on_click={myHandler} | ||
| /> | ||
| <Button | ||
| variant="secondary" | ||
| size="default" | ||
| on_click={myHandler} | ||
| > | ||
| <Icon icon={hamburgerIcon} /> | ||
| </Button> | ||
| </Wrapper> | ||
| ) | ||
| `} | ||
| </ComponentBox> | ||
|
|
||
| ## Web Components and properties | ||
|
|
||
| > What if a property has to change at runtime? | ||
| Changing a property (`props`) at runtime is a common thing in React. But also `dnb-ui-lib` Web Components support `prop` changes. | ||
| Keep in mind that not all components are tested to the last detail. | ||
| So, if you come over some special use cases, please contribute back and make a pull request. | ||
|
|
||
| <PropertiesExample /> | ||
| <ComponentBox noInline={true}> | ||
| {` | ||
| const Component = () => { | ||
| const time = new Date().toLocaleTimeString() | ||
| render( | ||
| <> | ||
| <dnb-form-label for_id="form-input"> | ||
| Web Component property updates | ||
| </dnb-form-label> | ||
| <dnb-input id="form-input" value={time} disabled /> | ||
| </> | ||
| ) | ||
| } | ||
| Component() | ||
| clearInterval(window.intervalId) | ||
| window.intervalId = setInterval(Component, 1e3) | ||
| `} | ||
| </ComponentBox> |
Oops, something went wrong.