Improve doc

UnlyEd · Jan 16, 2021 · d179fa4 · d179fa4 · github-actions · Jan 16, 2021
1 parent 41c3e2d
commit d179fa4
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 11 deletions.
diff --git a/src/components/utils/Btn.tsx b/src/components/utils/Btn.tsx
@@ -24,17 +24,9 @@ export type Props = {
 } & ReactButtonProps & ThemedComponentProps;
 
 /**
- * "Call to Action" button.
+ * Flexible HTML `button` component that can take many shapes and be used with various colors and background colors.
  *
- * Button meant to highlight a potential user interaction.
- * Themed component.
- *
- * Used to:
- *
- * - Navigate to another page
- * - Validate an action
- *
- * @param props
+ * Implements `ThemedComponentColors`.
  */
 const Btn: React.FunctionComponent<Props> = (props): JSX.Element => {
   const {

diff --git a/src/components/utils/CircleBtn.tsx b/src/components/utils/CircleBtn.tsx
@@ -29,7 +29,7 @@ export type Props = {
  *
  * Example: Can be used in replacement of Reactstrap Badge.
  *
- * Themed component.
+ * Implements `ThemedComponentColors`.
  */
 const CircleBtn: React.FunctionComponent<Props> = (props): JSX.Element => {
   const {

diff --git a/src/stories/nrn/a11y/example.stories.tsx b/src/stories/nrn/a11y/example.stories.tsx
@@ -3,6 +3,11 @@ import React from 'react';
 
 export default {
   title: 'Next Right Now/A11y/Button (default example)',
+  parameters: {
+    controls: {
+      hideNoControlsWarning: true,
+    },
+  },
 } as Meta;
 
 export const accessible = () => <button>Accessible button</button>;

diff --git a/src/stories/nrn/dataDisplay/Btn.stories.tsx b/src/stories/nrn/dataDisplay/Btn.stories.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import {
   Meta,
   Story,
@@ -34,3 +35,160 @@ export const DynamicExample: Story<PropsWithChildrenMock> = Template.bind({});
 DynamicExample.args = {
   text: 'Hello',
 };
+
+export const Buttons: Story = () => {
+  return (
+    <div>
+      <div
+        css={css`
+          padding: 20px;
+        `}
+      >
+        &nbsp;&nbsp;&nbsp;
+        <Btn>
+          Default
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn isTransparent={true}>
+          Default isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-reverse'}>
+          Reverse
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-reverse'} isTransparent={true}>
+          Reverse isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-outline'}>
+          Outline
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-outline'} isTransparent={true}>
+          Outline isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-variant'}>
+          Variant
+        </Btn>
+      </div>
+
+      <div
+        css={css`
+          padding: 20px;
+        `}
+      >
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary'}>
+          Secondary
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary'} isTransparent={true}>
+          Secondary isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-reverse'}>
+          Secondary Reverse
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-reverse'} isTransparent={true}>
+          Secondary Reverse isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-outline'}>
+          Secondary Outline
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-outline'} isTransparent={true}>
+          Secondary Outline isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-variant'}>
+          Secondary Variant
+        </Btn>
+      </div>
+
+      <br />
+      <br />
+      <br />
+
+      <div
+        css={css`
+          background-color: blue;
+          padding: 20px;
+        `}
+      >
+        &nbsp;&nbsp;&nbsp;
+        <Btn>
+          Default
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn isTransparent={true}>
+          Default isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-reverse'}>
+          Reverse
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-reverse'} isTransparent={true}>
+          Reverse isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-outline'}>
+          Outline
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-outline'} isTransparent={true}>
+          Outline isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'primary-variant'}>
+          Variant
+        </Btn>
+      </div>
+
+      <div
+        css={css`
+          background-color: blue;
+          padding: 20px;
+        `}
+      >
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary'}>
+          Secondary
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary'} isTransparent={true}>
+          Secondary isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-reverse'}>
+          Secondary Reverse
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-reverse'} isTransparent={true}>
+          Secondary Reverse isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-outline'}>
+          Secondary Outline
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-outline'} isTransparent={true}>
+          Secondary Outline isTransparent
+        </Btn>
+        &nbsp;&nbsp;&nbsp;
+        <Btn mode={'secondary-variant'}>
+          Secondary Variant
+        </Btn>
+      </div>
+    </div>
+  );
+};
+Buttons.parameters = {
+  controls: {
+    hideNoControlsWarning: true,
+  },
+};