feat(spinner): add spinner label

Author: codebender828

packages/c-spinner/examples/with-label.vue

@@ -0,0 +1,13 @@
+<template>
+  <c-spinner label="My spinner label" />
+</template>
+
+<script lang="ts">
+import { CSpinner } from '@chakra-ui/c-spinner/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCSpinnerExample',
+  components: { CSpinner },
+})
+</script>

packages/c-spinner/package.json

@@ -37,7 +37,8 @@
   "dependencies": {
     "@chakra-ui/styled-system": "^1.4.1",
     "@chakra-ui/vue-system": "*",
-    "@chakra-ui/vue-utils": "*"
+    "@chakra-ui/vue-utils": "*",
+    "@chakra-ui/c-visually-hidden": "*"
   },
   "peerDependencies": {
     "vue": ">=3.0.5"

packages/c-spinner/src/spinner.ts

@@ -7,6 +7,7 @@ import {
   useStyleConfig,
 } from '@chakra-ui/vue-system'
 import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
+import { CVisuallyHidden } from '@chakra-ui/c-visually-hidden'
 
 const spin = keyframes({
   '0%': {
@@ -119,7 +120,8 @@ const CSpinner = defineComponent({
         }),
         {
           ...attrs,
-        }
+        },
+        props.label && [h(CVisuallyHidden, props.label)]
       )
   },
 })

packages/c-spinner/tests/c-spinner.test.ts

@@ -4,4 +4,4 @@ import { CSpinner } from '../src'
 it('should render properly', () => {
   const { asFragment } = render(CSpinner)
   expect(asFragment()).toMatchSnapshot()
-})
+})

packages/c-visually-hidden/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/c-visually-hidden
+
+A component used in web accessibility to hide content from the visual client but keep it readable for screen readers
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-visually-hidden
+# or
+npm i @chakra-ui/c-visually-hidden
+```

packages/c-visually-hidden/examples/base-visually-hidden.vue

@@ -0,0 +1,14 @@
+<template>
+  <chakra.p>👇🏽 There's actually some visually hidden text here :) 😀 </chakra.p>
+  <c-visually-hidden> Visually Hidden </c-visually-hidden>
+</template>
+
+<script lang="ts">
+import { CVisuallyHidden } from '@chakra-ui/c-visually-hidden/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCVisuallyHiddenExample',
+  components: { CVisuallyHidden },
+})
+</script>

packages/c-visually-hidden/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@chakra-ui/c-visually-hidden",
+  "description": "Chakra UI Vue | A component used in web accessibility to hide content from the visual client but keep it readable for screen readers component",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "author": "Jonathan Bakebwa <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui=vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
+  },
+  "dependencies": {
+    "@chakra-ui/styled-system": "^1.4.1",
+    "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.5"
+  }
+}

packages/c-visually-hidden/src/c-visually-hidden.ts

@@ -0,0 +1,37 @@
+import { chakra } from '@chakra-ui/vue-system'
+import { CSSObject } from '@emotion/css'
+
+/**
+ * Styles to visually hide an element
+ * but make it accessible to screen-readers
+ */
+export const visuallyHiddenStyle: CSSObject = {
+  border: '0px',
+  clip: 'rect(0px, 0px, 0px, 0px)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  padding: '0px',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+}
+
+/**
+ * Visually hidden component used to hide
+ * elements on screen
+ */
+export const CVisuallyHidden = chakra('span', {
+  baseStyle: visuallyHiddenStyle,
+})
+
+/**
+ * Visually hidden input component for designing
+ * custom input components using the html `input`
+ * as a proxy
+ */
+export const CVisuallyHiddenInput = chakra('input', {
+  baseStyle: visuallyHiddenStyle,
+})
+
+export default CVisuallyHidden

packages/c-visually-hidden/src/index.ts

@@ -0,0 +1,2 @@
+export { default as CVisuallyHidden } from './c-visually-hidden'
+export * from './c-visually-hidden'

packages/c-visually-hidden/tests/c-visually-hidden.test.ts

@@ -0,0 +1,7 @@
+import { render } from '../../test-utils/src'
+import { CVisuallyHidden } from '../src'
+
+it('should render properly', () => {
+  const { asFragment } = render(CVisuallyHidden)
+  expect(asFragment()).toMatchSnapshot()
+})