From 0f6c65eadd58acb24d93bc6568a7307ddb2bc818 Mon Sep 17 00:00:00 2001 From: Aminejv Date: Mon, 3 Oct 2022 15:25:42 +0100 Subject: [PATCH] chore: delete /system page --- components/core/CodeTerminal.js | 76 ---- components/core/marketing/CodeTerminal.js | 91 ---- pages/_/system/avatar-group.js | 125 ------ pages/_/system/buttons.js | 238 ---------- pages/_/system/card-3d.js | 109 ----- pages/_/system/card-tabs.js | 189 -------- pages/_/system/checkboxes.js | 170 ------- pages/_/system/colors.js | 108 ----- pages/_/system/dropdowns.js | 289 ------------ pages/_/system/hover-tile.js | 103 ----- pages/_/system/icons.js | 111 ----- pages/_/system/inputs.js | 434 ------------------ pages/_/system/line-chart.js | 156 ------- pages/_/system/list-editor.js | 166 ------- pages/_/system/loaders.js | 93 ---- pages/_/system/notifications.js | 483 -------------------- pages/_/system/radios.js | 217 --------- pages/_/system/sliders.js | 339 -------------- pages/_/system/stats.js | 66 --- pages/_/system/tables.js | 517 ---------------------- pages/_/system/tabs.js | 191 -------- pages/_/system/tags.js | 200 --------- pages/_/system/toggles.js | 159 ------- pages/_/system/tooltips.js | 425 ------------------ pages/_/system/typography.js | 200 --------- rollup.config.js | 5 +- 26 files changed, 1 insertion(+), 5259 deletions(-) delete mode 100644 components/core/CodeTerminal.js delete mode 100644 components/core/marketing/CodeTerminal.js delete mode 100644 pages/_/system/avatar-group.js delete mode 100644 pages/_/system/buttons.js delete mode 100644 pages/_/system/card-3d.js delete mode 100644 pages/_/system/card-tabs.js delete mode 100644 pages/_/system/checkboxes.js delete mode 100644 pages/_/system/colors.js delete mode 100644 pages/_/system/dropdowns.js delete mode 100644 pages/_/system/hover-tile.js delete mode 100644 pages/_/system/icons.js delete mode 100644 pages/_/system/inputs.js delete mode 100644 pages/_/system/line-chart.js delete mode 100644 pages/_/system/list-editor.js delete mode 100644 pages/_/system/loaders.js delete mode 100644 pages/_/system/notifications.js delete mode 100644 pages/_/system/radios.js delete mode 100644 pages/_/system/sliders.js delete mode 100644 pages/_/system/stats.js delete mode 100644 pages/_/system/tables.js delete mode 100644 pages/_/system/tabs.js delete mode 100644 pages/_/system/tags.js delete mode 100644 pages/_/system/toggles.js delete mode 100644 pages/_/system/tooltips.js delete mode 100644 pages/_/system/typography.js diff --git a/components/core/CodeTerminal.js b/components/core/CodeTerminal.js deleted file mode 100644 index e250a6dc..00000000 --- a/components/core/CodeTerminal.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from "react"; -import * as Constants from "~/common/constants"; - -import { css, keyframes } from "@emotion/react"; - -const typewriter = keyframes` - 0%, 100% {width: 0;} - 20%, 80% {width: 10.2em;} -`; - -const STYLES_ROOT = css` - height: 300px; - width: 500px; - - @media (max-width: 600px) { - height: 230px; - width: 345px; - } - - @media (max-width: 320px) { - height: 200px; - width: 300px; - } -`; - -const STYLES_WINDOW = css` - box-sizing: border-box; - font-family: ${Constants.font.mono}; - display: block; - border-radius: 4px; - width: 100%; - background: ${Constants.system.black}; - min-height: 288px; - padding: 24px; - color: ${Constants.system.white}; - resize: none; - font-size: 14px; - box-sizing: border-box; - outline: 0; - border: 0; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); - scrollbar-width: none; - white-space: pre-wrap; - -ms-overflow-style: -ms-autohiding-scrollbar; - ::-webkit-scrollbar { - display: none; - } -`; - -const STYLES_WINDOW_NAV = css` - border-bottom: 5px solid red; -`; - -const STYLES_WINDOW_BODY = css` - overflow: hidden; - white-space: nowrap; - animation: ${typewriter}; - display: inline-block; - position: relative; - animation-duration: 10s; - animation-timing-function: steps(45, end); - animation-iteration-count: infinite; -`; - -const CodeTerminal = () => { - return ( -
-
-
Cat
-
npm install --save slate-react-system
-
-
- ); -}; - -export default CodeTerminal; diff --git a/components/core/marketing/CodeTerminal.js b/components/core/marketing/CodeTerminal.js deleted file mode 100644 index 57c787e3..00000000 --- a/components/core/marketing/CodeTerminal.js +++ /dev/null @@ -1,91 +0,0 @@ -import * as React from "react"; -import * as Constants from "~/common/constants"; - -import { css, keyframes } from "@emotion/react"; - -const typewriter = keyframes` - 0% { - width: 0; - } - 50% { - width: 10.2em; - } - 100% { - width: 0; - } -`; - -const STYLES_ROOT = css` - height: 300px; - width: 500px; - background-color: ${Constants.system.black}; - border-radius: 5px; - - @media (${Constants.sizes.tablet}px) { - height: 230px; - width: 345px; - } - - @media (${Constants.sizes.mobile}px) { - height: 200px; - width: 300px; - } -`; - -const STYLES_WINDOW_HEADER = css` - height: 34px; - display: flex; - align-items: center; - text-align: center; - - @media (${Constants.sizes.mobile}px) { - height: 28px; - } -`; - -const STYLES_ICON = css` - border-radius: 50%; - display: inline-block; - width: 12px; - height: 12px; - margin-left: 8px; - - :nth-of-type(1) { - background: rgb(255, 95, 86); - margin-left: 12px; - } - :nth-of-type(2) { - background: rgb(255, 189, 46); - } - :nth-of-type(3) { - background: rgb(39, 201, 63); - } -`; - -const STYLES_WINDOW_BODY = css` - padding: 24px; - overflow: hidden; - white-space: nowrap; - color: ${Constants.system.white}; - animation: ${typewriter}; - display: inline-block; - position: relative; - animation-duration: 10s; - animation-timing-function: steps(45, end); - animation-iteration-count: infinite; -`; - -const CodeTerminal = () => { - return ( -
-
- - - -
-
npm install --save slate-react-system
-
- ); -}; - -export default CodeTerminal; diff --git a/pages/_/system/avatar-group.js b/pages/_/system/avatar-group.js deleted file mode 100644 index 9111f5be..00000000 --- a/pages/_/system/avatar-group.js +++ /dev/null @@ -1,125 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as Constants from "~/common/constants"; - -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; -import Group from "~/components/system/Group"; - -const images = [ - "https://image.flaticon.com/icons/svg/145/145843.svg", - "https://image.flaticon.com/icons/svg/387/387561.svg", - "https://image.flaticon.com/icons/svg/3227/3227891.svg", - "https://image.flaticon.com/icons/svg/3227/3227891.svg", - "https://image.flaticon.com/icons/svg/3227/3227891.svg", - "https://image.flaticon.com/icons/svg/3227/3227891.svg", -]; - -export default class SystemAvatarGroup extends React.Component { - render() { - return ( - - - Avatar Group - -
-
- - The AvatarGroup component is a compact way to show a group users or contributors. - -
-
-
- Imports -
-
- Import React and the AvatarGroup Component. -
- - {`import * as React from "react"; -import { AvatarGroup } from "slate-react-system";`} - -
-
- Usage -
-
- Create an array of images. -
- - {`const images = [ - "avatar-01.jpg", - "avatar-02.jpg", - "avatar-04.jpg", - "avatar-05.jpg", - "avatar-06.jpg", -];`} - -
-
- Declare the AvatarGroup component. -
- {``} -
-
- Output -
-
- -
-
-
- Accepted React Properties -
-
- - - - - ); - } -} diff --git a/pages/_/system/buttons.js b/pages/_/system/buttons.js deleted file mode 100644 index 34887cd9..00000000 --- a/pages/_/system/buttons.js +++ /dev/null @@ -1,238 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; - -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; -import Group from "~/components/system/Group"; - -export default class SystemPageButtons extends React.Component { - render() { - return ( - - - Buttons - -
-
- - The Button component is used to trigger an action or event, such as submitting a form or - saving users information. - -
-
-
- Imports -
-
- Import React and the Button Components. -
-
- - {`import * as React from "react"; -import { - ButtonPrimary, - ButtonSecondary, - ButtonTertiary, - ButtonDisabled, - ButtonWarning, -} from "slate-react-system";`} - -
-
- Regular width -
-
- - There are five variations of the button component. -
- Primary, Secondary, Tertiary, Disabled, and Warning. - -
- Primary   - Secondary   - Tertiary   - Disabled   - Warning -
-
- - {`class ExamplePrimary extends React.Component { - render() { - return Primary Button; - } -} - -class ExampleSecondary extends React.Component { - render() { - return Secondary Button; - } -} - -class ExampleTertiary extends React.Component { - render() { - return Tertiary Button; - } -} - -class ExampleDisabled extends React.Component { - render() { - return Disabled Button; - } -} - -class ExampleWarning extends React.Component { - render() { - return Warning Button; - } -}`} - -
-
-
- Full width -
-
- Each of the button styles has a full width option. -
- Primary button full -
-
- Secondary button full -
-
- Tertiary button full -
-
- Disabled button full -
-
- Warning button full -
-
-
- - {`class ExamplePrimaryFull extends React.Component { - render() { - return Primary button full; - } -} - -class ExampleSecondaryFull extends React.Component { - render() { - return Secondary button full; - } -} - -class ExampleTertiaryFull extends React.Component { - render() { - return Tertiary button full; - } -} - -class ExampleDisabledFull extends React.Component { - render() { - return Disabled button full; - } -} - -class ExampleWarningFull extends React.Component { - render() { - return Warning button full; - } -}`} - -
-
-
- Labels -
-
- - You can add the type='label' property to convert any of the above buttons into a - label. - -
- Primary label   - Secondary label   - Tertiary label   - Disabled label   -
-
- Warning label -
-
- - {`class ExamplePrimaryLabel extends React.Component { - render() { - return Primary Button Label; - } -} - -class ExampleSecondaryLabel extends React.Component { - render() { - return ( - Secondary Button Label - ); - } -} - -class ExampleTertiaryLabel extends React.Component { - render() { - return ( - Tertiary Button Label - ); - } -} - -class ExampleDisabledLabel extends React.Component { - render() { - return Disabled Button Label; - } -} - -class ExampleWarningLabel extends React.Component { - render() { - return Warning Button Label; - } -}`} - -
-
-
- Accepted React Properties -
-
- - - - - ); - } -} diff --git a/pages/_/system/card-3d.js b/pages/_/system/card-3d.js deleted file mode 100644 index b60c4abd..00000000 --- a/pages/_/system/card-3d.js +++ /dev/null @@ -1,109 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as Constants from "~/common/constants"; - -import { css } from "@emotion/react"; - -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -const STYLES_WRAPPER = css` - height: 200px; - width: 320px; -`; - -const STYLES_LAYER = css` - position: absolute; - width: 100%; - height: 100%; - top: 0%; - left: 0%; - background-repeat: no-repeat; - background-position: center; - background-color: transparent; - background-size: cover; - transition: all 0.1s ease-out; - overflow: hidden; - border-radius: 8px; -`; - -export default class SystemPageCard3D extends React.Component { - render() { - return ( - - - 3D Card - -
-
- - The 3D Card Component is a fluid card component used to display present any object in 3d. - It is a port of the vanilla JS pen{" "} - of Robin Delaporte to React. The code is used - under the MIT license. - -
-
-
- Imports -
-
- Import 3D Card Component. -
-
- {`import { Card3D } from 'slate-react-system';`} -
-
- Usage -
-
- Declare the 3D Card Component. -
- - {`/* Custom styles for the container to set width and height */ -
- - /* Any object with custom styles goes in here */ -
-
- -
`} - -
-
- Output -
-
-
- -
-
- -
- - ); - } -} diff --git a/pages/_/system/card-tabs.js b/pages/_/system/card-tabs.js deleted file mode 100644 index 4b1eb725..00000000 --- a/pages/_/system/card-tabs.js +++ /dev/null @@ -1,189 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as Constants from "~/common/constants"; - -import Group from "~/components/system/Group"; -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -const TAB_GROUP_TWO = [ - { value: "1", label: "Capricorn" }, - { value: "2", label: "Aquarius" }, -]; - -const TAB_GROUP_FOUR = [ - { value: "1", label: "Capricorn" }, - { value: "2", label: "Aquarius" }, - { value: "3", label: "Pisces" }, - { value: "4", label: "Aries" }, -]; - -export default class SystemPageCardTabs extends React.Component { - state = { - exampleOne: "1", - exampleTwo: "4", - }; - - _handleChange = (e) => { - this.setState({ [e.target.name]: e.target.value }); - }; - - render() { - return ( - - - Card Tabs - -
-
- - The CardTabGroup component is used to allow the users to switch between views. - -
-
-
- Imports -
-
- Import React and the CardTabGroup Component. -
-
- - {`import * as React from "react"; -import { CardTabGroup } from "slate-react-system";`} - -
-
- Usage -
-
- Define the tab group values and labels. -
- - {`const TAB_GROUP_TWO = [ - { value: "1", label: "Capricorn" }, - { value: "2", label: "Aquarius" }, -]; - -const TAB_GROUP_FOUR = [ - { value: "1", label: "Capricorn" }, - { value: "2", label: "Aquarius" }, - { value: "3", label: "Pisces" }, - { value: "4", label: "Aries" }, -];`} - -
- Declare the CardTabGroup component. -
- - {`class ExampleOne extends React.Component { - state = { exampleOne: "1" }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( - - ); - } -} - -class ExampleTwo extends React.Component { - state = { exampleTwo: "4" }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( - - ); - } -}`} - -
-
- Output -
-
- -
-
- -
-
-
- Accepted React Properties -
-
- - onChange, - b: "function", - c: "null", - d: "Function called upon an onChange event", - }, - { - id: 2, - a: value, - b: "boolean", - c: "false", - d: - "The value that is currently selected. Can be used to assign default values as well", - }, - { - id: 3, - a: options, - b: "Array", - c: "[]", - d: "An array of options, each of which has a value and a label", - }, - { - id: 4, - a: "name", - b: "string", - c: "null", - d: "Input name", - }, - ], - }} - /> - - - ); - } -} diff --git a/pages/_/system/checkboxes.js b/pages/_/system/checkboxes.js deleted file mode 100644 index 582fb81a..00000000 --- a/pages/_/system/checkboxes.js +++ /dev/null @@ -1,170 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as Constants from "~/common/constants"; - -import Group from "~/components/system/Group"; -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -export default class SystemPageCheckboxes extends React.Component { - state = { - exampleOne: false, - exampleTwo: true, - }; - - _handleChange = (e) => { - this.setState({ [e.target.name]: e.target.value }); - }; - - render() { - return ( - - - Checkboxes - -
-
- - The Checkbox component is used in forms when a users needs to select a true or false - value. - -
-
-
- Imports -
-
- Import React and the CheckBox Component. -
-
- - {`import * as React from "react"; -import { CheckBox } from "slate-react-system";`} - -
-
- Usage -
-
- - Declare the CheckBox component. Any children will be rendered as the label to the right of - the checkbox. - -
- - - {`class ExampleOne extends React.Component { - state = { exampleOne: false }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( - - Unchecked -
- This CheckBox default is unchecked. - - ); - } -} - -class ExampleTwo extends React.Component { - state = { ExampleTwo: true }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( - - Checked -
- This CheckBox default is checked. - - ); - } -}`} - -
-
- Output -
-
- - Unchecked -
- This CheckBox default is unchecked. - -
-
- - Checked -
- This CheckBox default is checked. - -
-
-
- Accepted React Properties -
-
- - onChange, - b: "function", - c: "null", - d: "Function called upon an onChange event", - }, - { - id: 2, - a: value, - b: "boolean", - c: "false", - d: "The value of the checkbox. Can be used to assign default values as well", - }, - { - id: 3, - a: "name", - b: "string", - c: "null", - d: "Input name", - }, - ], - }} - /> - - - ); - } -} diff --git a/pages/_/system/colors.js b/pages/_/system/colors.js deleted file mode 100644 index 515c842f..00000000 --- a/pages/_/system/colors.js +++ /dev/null @@ -1,108 +0,0 @@ -import * as React from "react"; -import * as Strings from "~/common/strings"; -import * as System from "~/components/system"; -import * as Constants from "~/common/constants"; - -import { css } from "@emotion/react"; - -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -const STYLES_COLOR_BAR = css` - width: 100%; - display: flex; - align-items: center; - padding: 72px 24px 0 0px; -`; - -const STYLES_COLOR_TEXT = css` - display: block; - text-transform: uppercase; - letter-spacing: 0.2px; - font-size: 12px; - padding: 8px; - color: ${Constants.system.white}; - background-color: rgba(0, 0, 0, 0.4); - margin-top: 8px; -`; - -export default class SystemPageColors extends React.Component { - render() { - return ( - - - Colors - -
-
- All of the colors the Filecoin Client uses. -
-
-
- Imports -
-
- Import Constants. -
-
- {`import { Constants } from 'slate-react-system';`} -
-
- Usage -
-
- Declare Constants. -
- - {`{Constants.system.white}; - -{Constants.semantic.bgLight}; - -{Constants.system.gray}; - -{Constants.semantic.borderGrayLight}; - -{Constants.system.grayLight2}; - -{Constants.system.black}; - -{Constants.system.black}; - -{Constants.system.blue}; - -{Constants.system.green}; - -{Constants.system.yellow}; - -{Constants.system.red};`} - -
-
- Output -
-
- {Object.keys(Constants.system).map((each) => { - const hex = Constants.system[each]; - const rgba = Strings.hexToRGBA(hex); - return ( -
- {each.toUpperCase()} -
- {hex} -
- {rgba} -
- ); - })} - - ); - } -} diff --git a/pages/_/system/dropdowns.js b/pages/_/system/dropdowns.js deleted file mode 100644 index 70f0c4e1..00000000 --- a/pages/_/system/dropdowns.js +++ /dev/null @@ -1,289 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as Constants from "~/common/constants"; - -import Group from "~/components/system/Group"; -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -const SELECT_MENU_OPTIONS = [ - { value: "1", name: "Capricorn" }, - { value: "2", name: "Aquarius" }, - { value: "3", name: "Pisces" }, - { value: "4", name: "Aries" }, - { value: "5", name: "Taurus" }, - { value: "6", name: "Gemini" }, - { value: "7", name: "Cancer" }, - { value: "8", name: "Leo" }, - { value: "9", name: "Virgo" }, - { value: "10", name: "Libra" }, - { value: "11", name: "Scorpio" }, - { value: "12", name: "Sagittarus" }, -]; - -export default class SystemPageDropdowns extends React.Component { - state = { - exampleOne: "1", - exampleTwo: "3", - exampleThree: "United States of America", - }; - - _handleChange = (e) => { - this.setState({ [e.target.name]: e.target.value }); - }; - - render() { - return ( - - - Dropdowns - -
-
- - The Dropdown component is used to present the user a list of values where they can select - a single option. - -
-
-
- Imports -
-
- - Import React and the SelectMenu and/or the{" "} - SelectCountryMenu Components. - -
-
- - {`import * as React from "react"; -import { SelectMenu, SelectCountryMenu } from "slate-react-system";`} - -
-
- Dropdown -
-
- -
-
- -
-
-
- - Define the dropdown menu options. Each entry must have a name and a value. - -
- - {`const SELECT_MENU_OPTIONS = [ - { value: "1", name: "Capricorn" }, - { value: "2", name: "Aquarius" }, - { value: "3", name: "Pisces" }, - { value: "4", name: "Aries" }, - { value: "5", name: "Taurus" }, - { value: "6", name: "Gemini" }, - { value: "7", name: "Cancer" }, - { value: "8", name: "Leo" }, - { value: "9", name: "Virgo" }, - { value: "10", name: "Libra" }, - { value: "11", name: "Scorpio" }, - { value: "12", name: "Sagittarus" }, -];`} - -
-
- - Declare the Dropdown component. Default values can be assigned using{" "} - value. - -
- - {`class ExampleOne extends React.Component { - state = { exampleOne: "1" }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( - - ); - } -} - -class ExampleTwo extends React.Component { - state = { exampleTwo: "3" }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( - - ); - } -}`} - -
-
-
- Country Picker Dropdown -
-
- -
-
-
- Declare a dropdown to select from a list of countries. -
- - {`class ExampleThree extends React.Component { - state = { exampleThree: "United States of America" }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( - - ); - } -}`} - -
-
-
- Accepted React Properties -
-
- - options, - b: "Array", - c: "[]", - d: - "Array of options to select from. Each object in the array should have a name and value", - }, - { - id: 2, - a: onChange, - b: "function", - c: "null", - d: "Function called upon an onChange event", - }, - { - id: 3, - a: value, - b: "string", - c: "null", - d: - "The value that the dropdown takes. Can be used to assign default values as well.", - }, - { - id: 4, - a: "name", - b: "string", - c: "null", - d: "Input name", - }, - { - id: 5, - a: "label", - b: "string", - c: "null", - d: "Label text", - }, - { - id: 6, - a: "description", - b: "string", - c: "null", - d: "Description text", - }, - { - id: 7, - a: "tooltip", - b: "string", - c: "null", - d: "Tooltip text", - }, - { - id: 8, - a: "full", - b: "boolean", - c: "false", - d: "Sets width to 100% if true", - }, - { - id: 9, - a: "category", - b: "string", - c: "null", - d: "Category text", - }, - ], - }} - /> - - - ); - } -} diff --git a/pages/_/system/hover-tile.js b/pages/_/system/hover-tile.js deleted file mode 100644 index 8482cdf4..00000000 --- a/pages/_/system/hover-tile.js +++ /dev/null @@ -1,103 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; - -import Group from "~/components/system/Group"; -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -export default class SystemHoverTile extends React.Component { - render() { - return ( - - - Hover Tile - -
-
- The Hover Tile component is an animated, moving container. -
-
-
- Imports -
-
- Import React and the Hover Tile Component. -
-
- - {`import * as React from "react"; -import { HoverTile } from "slate-react-system";`} - -
-
- Usage -
-
- Declare the Hover Tile component. - - {`class Example extends React.Component { - render() { - return ( - - Example Content - - ); - } -}`} - -
-
- Output -
-
- Example Content -
-
-
- Accepted React Properties -
-
- - - - - ); - } -} diff --git a/pages/_/system/icons.js b/pages/_/system/icons.js deleted file mode 100644 index 746caaf7..00000000 --- a/pages/_/system/icons.js +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as SVG from "~/common/svg"; -import * as Constants from "~/common/constants"; - -import { css } from "@emotion/react"; - -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -const DEFAULT_SYSTEM_ICON_SIZE = "88px"; - -const ICONS = [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , -]; - -const STYLES_ICON = css` - padding: 24px; - color: ${Constants.system.black}; - display: inline-flex; - transition: 200ms ease color; - text-align: center; - - :hover { - color: ${Constants.system.blue}; - } -`; - -export default class SystemPageIcons extends React.Component { - render() { - return ( - - - Icons - -
-
- Every icon used in the Filecoin Client. -
-
-
- Imports -
-
- Import the SVG Components. -
-
- {`import { SVG } from "slate-react-system";`} -
-
- Usage -
-
- Declare the SVG icons. -
- - {` - - - - - - - - - - - - - - - - - - - -`} - -
-
- Output -
-
- {ICONS.map((icon, i) => { - return ( -
- {icon} -
- ); - })} - - ); - } -} diff --git a/pages/_/system/inputs.js b/pages/_/system/inputs.js deleted file mode 100644 index 6e1d6315..00000000 --- a/pages/_/system/inputs.js +++ /dev/null @@ -1,434 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as Constants from "~/common/constants"; -import * as SVG from "~/common/svg"; - -import Group from "~/components/system/Group"; -import SystemPage from "~/components/system/SystemPage"; -import ViewSourceLink from "~/components/system/ViewSourceLink"; -import CodeBlock from "~/components/system/CodeBlock"; - -export default class SystemPageInputs extends React.Component { - state = { - exampleOne: "Example text", - exampleTwo: "", - exampleThree: "", - exampleFour: "aaaaa-bbbbb-ccccc-ddddd-eeee", - exampleFive: "Click the 'x'", - }; - - _handleChange = (e) => { - this.setState({ [e.target.name]: e.target.value }); - }; - - render() { - return ( - - - Inputs - -
-
- - The Input component is used to get a users input in a text field or a textbox. - -
-
-
- Imports -
-
- Import React and the Input and/or the Textarea Components. -
-
- - {`import * as React from "react"; -import { Input, Textarea } from "slate-react-system";`} - -
-
- Textarea -
-
- Declare the Textarea component. -
- -
- - {`class ExampleTextarea extends React.Component { - state = { exampleOne: "Example text" }; - - _handleChange = (e) => this.setState({ [e.target.name]: e.target.value }); - - render() { - return ( -